<template>
  <div class="about">
    <h1>This is an about page</h1>
    <p>原始数据拼接的name:{{ fistName }} {{ lastName }}</p>
    <p>使用计算函数的name:{{ name }}</p>
    <button @click="name='wang wu'">修改name</button>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  name: "AboutView",
});
</script>

<script lang="ts" setup>
import {computed, ref} from "vue";

const fistName = ref('li');
const lastName = ref('si');

// 可读可写
// const name = computed({
//   get() {
//     return fistName.value + ' ' + lastName.value
//   },
//   set(newVal: string) {
//     [fistName.value, lastName.value] = newVal.split(" ")
//   }
// });

// 只读
const name = computed(() => fistName.value + ' ' + lastName.value);
</script>